<template>
<div>
    <div class="app-conent">
        <div class="title">
                <span>{{topicDetail.title}}</span>
        </div>
        <div class="description">
                <span>{{topicDetail.description}}</span>
        </div>
        <div class="video-box">
                <div class="video-item" v-for="(v,index) in topicDetail.videoListObj" :key="index">
                    <video :id="'video_id'+v.fileNo" :key="v.fileNo" class="video-play" :src="getFilePath(v.fileNo)"  :poster="getVideoPoster(v)" controls preload="none" width="100%" height="264"></video>
                </div>
        </div>
        <div class="pic-box">
           <div class="pic-item" v-for="(pic,index) in picConcat()" :key="index">
                   <img :key="index" v-lazy="getFilePath(pic.fileNo)" preview="0" preview-text="缩略图与大图模式" class="view-img"/>
           </div>
        </div>

    </div>
</div>
</template>

<script>
import {queryTopicDetail} from '@/api/topic'
export default {
    data(){
        return{
            topicId:"",
            topicDetail:{
                title:"",
                description:"",
                picListObj:[],
                thumbListObj:[]

            },
            players:[]
        }
    },
    methods:{
        getVideoPoster(f){
            let p = this.topicDetail.thumbListObj.filter((item)=>{
                    return item.fileUrl==f.fileUrl;
            })
            if(p.length>0){
                    return this.getFilePath(p[0].fileNo);
            }
        },
        getFilePath(code){
            return this.$baseUrl+"/file/load?fileNo="+code
        },
        picConcat(){
                let list =  this.topicDetail.picListObj.concat(this.topicDetail.thumbListObj);
                return list;
        },
        initPlay(dom){
            var player = videojs(dom,{
                muted: false,
                controls : true,      
                loop : true
            })
            return player;
        },
        getDetail(){
                queryTopicDetail({id:this.topicId}).then((res)=>{
                        this.topicDetail = res.data;
                        console.log(this.topicDetail)
                        let documents = document.getElementsByClassName("video-play");
                        if(window.players){
                            for(let p in window.players){
                                window["players"][p].dispose();
                            }
                        }
                        setTimeout(()=>{
                                this.$previewRefresh()
                                this.players = [];
                                // for(let i in documents){
                                //        if(!window["players"]){
                                //             window["players"] = {};
                                //        }
                                //         window["players"][i] = this.initPlay(documents[i].id);
                                // }
                                
                        },100);
                })
        }
    },
    mounted(){
         this.topicId = this.$route.params.id;
         this.getDetail();
       
    },
    activated(){
         this.topicId = this.$route.params.id;
         this.getDetail();
         
    }
}
</script>
<style lang="less" scoped>
div{
    box-sizing: inherit;
}
    .app-conent{
        padding:20px 10px;
    }
    .title{
        font-size:14x;
        padding:3px 10px;
        border-bottom: 1px solid #CCC
        
    }
    .description{
        font-size:12px;
        color:#CCC;
        padding:10px 10px;
    }
    .video-item{
        position: relative;
        width:100%;
        margin-top:10px;
    }
    .video-play{
        width:100%;
    }
    .view-img{
        object-fit: scale-down;
        width: 100%;
        height: auto;
    }

</style>